<template>
  <div class="padding">
    <table border="0">
      <thead class="thead">
        <tr>
          <td v-for="item in headers">{{ item }}</td>
        </tr>
      </thead>
      <div
        :style="{
          height: height + 'px',
          overflow: 'auto',
        }"
      >
        <Vue3SeamlessScroll
          :list="tableData"
          :step="0.5"
          :limitScrollNum="4"
          :hover="true"
          :wheel="true"
        >
          <tbody class="tbody">
            <tr v-for="item in tableData" @click="rowClick(item)">
              <td v-for="ele in propsData">
                <slot :name="ele" :row="item">
                  {{ item[ele] }}
                </slot>
              </td>
            </tr>
          </tbody>
        </Vue3SeamlessScroll>
      </div>
    </table>
  </div>
</template>
<script setup>
import { defineExpose, ref, defineProps, defineEmits } from "vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
const props = defineProps({
  headers: {
    type: Array,
    default: () => [],
  },
  propsData: {
    type: Array,
    default: () => [],
  },
  height: {
    type: String,
    default: "200",
  },
  title: String,
});
const tableData = ref([]);
const setData = (data) => {
  tableData.value = data;
};
const emits = defineEmits(["rowCilck"]);

const rowClick = (row) => {
  emits("rowCilck", row);
};
defineExpose({
  setData,
});
</script>
<style lang="scss" scoped>
.padding {
  padding: 5px;
  background: rgba(94, 138, 152, 0.2);
}
.leftuppercontainer {
  overflow: auto;
}
table {
  text-align: center;
  color: #fff;
  white-space: nowrap;
  border-collapse: collapse;
  border-spacing: 0;
}

table tbody {
  display: block;
  font-size: 12px;
}
.thead {
  background: rgba(0, 0, 0, 0.2);
  height: 33px;
  line-height: 33px;
  color: #ffffff;
  opacity: 0.5;
}

.tbody {
  tr {
    height: 33px;
    line-height: 33px;
  }
  tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.2);
  }
}
table thead,
tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

table tbody tr td {
  width: 30px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.color-font {
  color: #ffc916;
}

table thead {
  font-size: 12px;
}
</style>
